<template>
  <div>
    <header></header>
    <form class="search_form" @submit.prevent>
      <input type="search" name="search" placeholder="请输入商家或商品名称" v-model="placeholder" class="search_input" />
      <input type="submit" class="search_submit" @click="isFind" />
    </form>
    <ul v-if="isShow">
      <li v-for="(supore, index) in res.supores" :key="index">
        <img class="imgHead" src="./img/22.png" />
        <p>{{ supore.content }}</p>
        <span>￥{{ supore.pice }}</span>
        <img class="imgShop" src="./img/f3.png" />
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data() {
    return {
      placeholder: '',
      isShow: '',
    }
  },
  computed: {
    // isPlaceholder() {
    //   /^1{10}$/.test(this.placeholder)
    // },
    ...mapState(['res']),
  },
  mounted() {
    this.$store.dispatch('getLogin')
  },
  methods: {
    isFind() {
      if (this.placeholder === '') {
        this.isShow = false
      } else {
        this.isShow = true
      }
    },
  },
}
</script>

<style scoped lang="stylus">
header {
  width: 100%;
  height: 30px;
  background: url('./img/mybg.jpg') repeat-y;
  background-size: 100%;
}

.search_form {
  width: 100%;
  height: 35px;
  line-height: 35px;

  .search_input {
    width: 79%;
    height: 30px;
    border: 4px solid #f2f2f2;
    font-size: 14px;
    margin: 8px 0 0 4px;
    color: #333;
    background-color: #f2f2f2;
  }

  .search_submit {
    width: 18%;
    height: 30px;
    line-height: 30px;
    border: 4px solid #ff2150;
    position: fixed;
    margin: 8px 0 0 5px;
    font-size: 16px;
    background-color: #ff2150;
  }
}

ul {
  margin-top: 15px;

  li {
    width: 100%;
    height: 63px;

    .imgHead {
      width: 48px;
      height: 48px;
      margin-left: 5px;
    }

    p {
      position: absolute;
      display: inline-block;
      font-size: 12px;
      margin-left: 5px;
    }

    span {
      margin-left: 5px;
      color: #ff2150;
      font-size: 13px;
      font-weight: bold;
    }

    .imgShop {
      width: 17px;
      height: 16px;
      margin-left: 260px;
    }
  }
}
</style>
